<template>
	<view class="page page-bg content-20" style="padding-top: 0;">
		<!-- 用户未登录 -->
		<button v-if="!userInfo.id" open-type="getUserInfo" @getuserinfo='bindgetuserinfo' class="user-login btn-share btn-share2">
			<view class="header-info">
				<image class="user-avatar" src="../../static/common/avatar.png" mode=""></image>
				<view class="user-info">
					<view  class="user-login">点击登录</view>
					<view class="login-desc">登录一下,发现更多精彩!</view>
				</view>
			</view>
		</button> 
		<!-- 用户已登录 -->
		<view class="header-info" v-else>
			<image class="user-avatar" :src="userInfo.avatar | avatar" mode=""></image>
			<view class="user-info">
				<view class="user-name">{{userInfo.nickName}} 
					<text class="role" v-if="userInfo.doctorId === common.defaultId">普通用户</text>
					<text class="role" v-else>医生</text>
				</view>
				<view class="bind-phone" @click="$link('/pages/public/getWeappPhoneNumber')" v-if="!userInfo.phoneNumber">未绑定手机号</view>
				<view class="login-desc" v-else>{{userInfo.phoneNumber | phonePartOf}}</view>
			</view>
		</view>
		
		<!-- 已登录 -->
		<block v-if="userInfo.id">
			<!-- 用户功能 -->
			<view class="user" v-if="userInfo.doctorId === common.defaultId">
			<view class="money">
			<view class="money-item" @click="$link('/pagesMine/balance')">
				<view class="item-title">钱包</view>
				<view class="item-money yuan">0.00</view>
				<u-icon name='arrow-right' size='20' color='#999999'></u-icon>
			</view>
			
			<view class="money-item" @click="$link('/pagesMine/point')">
				<view class="item-title">积分</view>
				<view class="item-money">0</view>
				<u-icon name='arrow-right' size='20' color='#999999'></u-icon>
			</view>
		</view>
	
		
		<image class="ad-bg" src="../../static/bg_10.png" mode=""></image>
		
		<view v-if="1===2" class="member" @click="$link('/pagesMine/upgrade')">
			<view class="member-info">
				<view class="status">未开通VIP会员</view>
				<view class="desc">会员VIP专享优质尊贵特权！</view>
			</view>
			<view class="op-start">点击开通</view>
		</view>
		
		<view class="cell-box" >
			<u-cell-group>
				<u-cell-item @click="$link('/pagesMine/meet')" title="预约挂号" value=''></u-cell-item>
				<u-cell-item @click="$link('/pagesMine/wzList')" title="我的问诊" value=''></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="cell-box" >
			<u-cell-group>
				<u-cell-item @click="$link('/pagesMine/pets')" title="我的爱宠" value='去添加'></u-cell-item>
				<u-cell-item @click="$link('/pagesMine/petsRecords')" title="爱宠病历" value='去查看'></u-cell-item>
				<u-cell-item @click="$link('/pagesMine/gorowthList')" title="成长记录" value='去记录'></u-cell-item>
				<u-cell-item @click="$link('/pagesMine/dogCard')" title="电子犬证" value='去办理'></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="mine-nav" style="background-color: #fff;">
			<view class="mine-nav__item" v-for="item in navs" :key='item.id' @click="mineMenu(item.path, item.id)">
				<image class="mine-nav__img" :src="item.icon" mode="aspectFit"></image>
				<view class="mine-item__title">{{item.name}}</view>
			</view>
			
			<button class="mine-nav__item btn-share" open-type="share">
				<image class="mine-nav__img" src="../../static/icon_08.png" mode="aspectFit"></image>
				<view class="mine-item__title">分享小程序</view>
			</button>
		</view>
		</view>
		<!-- 医生功能 -->
		<view class="doctor" v-else>
			<view class="cell-box">
				<u-cell-group>
					<u-cell-item @click="$link('/pagesMine/doctorMeet')" title="预约列表" value='去查看'></u-cell-item>
					<u-cell-item @click="$link('/pagesMine/doctorWzList')" title="问诊列表" value='去查看'></u-cell-item>
					<u-cell-item @click="$link('/pagesMine/doctorPet')" title="添加宠物动态" value='去添加'></u-cell-item>
				</u-cell-group>
			</view>
			<view class="cell-box">
				<u-cell-group>
					<u-cell-item  title="开启预约通知消息" :arrow='false' arrow-direction="down" @click=''>
						<u-icon slot="setting-fill" size="32" name="search"></u-icon>
						<u-switch  v-model="checked" @change='switchChange'></u-switch>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>
		
		<view class="logout" @click="logout">退出登录</view>
		</block>
		
		<!-- 未登录 -->
		<view @click="$link('/pages/public/login')" v-else>
			<view class="money">
				<view class="money-item">
					<view class="item-title">钱包</view>
					<view class="item-money yuan">0.00</view>
					<u-icon name='arrow-right' size='20' color='#999999'></u-icon>
				</view>
				
				<view class="money-item">
					<view class="item-title">积分</view>
					<view class="item-money yuan">0</view>
					<u-icon name='arrow-right' size='20' color='#999999'></u-icon>
				</view>
			</view>
			
			<image class="ad-bg" src="../../static/bg_10.png" mode=""></image>
			
			<!-- <view class="member">
				<view class="member-info">
					<view class="status">未开通VIP会员</view>
					<view class="desc">会员VIP专享优质尊贵特权！</view>
				</view>
				<view class="op-start">点击开通</view>
			</view> -->
			
			<view class="cell-box">
				<u-cell-group>
					<u-cell-item  title="预约挂号" value='0'></u-cell-item>
					<u-cell-item  title="我的问诊" value='0'></u-cell-item>
				</u-cell-group>
			</view>
			<view class="cell-box">
				<u-cell-group>
					<u-cell-item  title="我的爱宠" value='去添加'></u-cell-item>
					<u-cell-item  title="爱宠病历" value='去查看'></u-cell-item>
					<u-cell-item  title="成长记录" value='去记录'></u-cell-item>
					<u-cell-item  title="电子犬证" value='去办理'></u-cell-item>
				</u-cell-group>
			</view>
			<view class="mine-nav" style="background-color: #fff;">
				<view class="mine-nav__item" v-for="item in navs" :key='item.id'>
					<image class="mine-nav__img" :src="item.icon" mode="aspectFit"></image>
					<view class="mine-item__title">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				common,
				navs: [
					{ id: 1, name: '了解我们', path: '/pagesMine/aboutus', icon: '../../static/icon_05.png'  },
					{ id: 2, name: '意见反馈', path: '/pagesMine/opinion', icon: '../../static/icon_06.png'  },
					{ id: 3, name: '客服电话', path: '/pagesMain/wz/wz', icon: '../../static/icon_07.png'  }
				],
				userInfo: {},
				
				
				icon: 'setting',
				arrow: true,
				label: '',
				title: '青山一道同云雨',
				checked: false,
				rightSlot: 'switch'
			}
		},
		
		onLoad() {
			
		},
		
		onShow() {
			this.userInfo = common.getUserInfo()
			// #ifdef MP-WEIXIN
			uni.getSetting({
				withSubscriptions: true,
				success(res) {
					console.log(res);
				}
			})
			// #endif
			
			if(this.$isLogin()) {
				this.getUserInfo()
			}
			
			uni.login({
				success(res) { 
					console.log(res);
					common.setStorage('wxLoginCode', res.code)
				},
				fail(err) {
					console.log(err);
				}
			})
		},
		
		methods: {
			getUserInfo() {
				api.getUserInfo({}, res => {
					this.userInfo = res
					common.setUserInfo(res)
				})
			},
			
			switchChange(e) {
				if(e) {
					uni.requestSubscribeMessage({
						tmplIds: ['5DwkPPSLS8DponizktT66I75sJWekXm21kUghJvnvbQ'],
						success: suc => { this.checked = true },
						fail: err => { this.checked = false },
						complete: res => {
							// console.log('完成');
						}
					})
				}else {
					this.checked = e
				}
			},
			
			logout() {
				 this.$showModal('温馨提示', "您确定要退出登录么?", () => {
					uni.removeStorageSync("token");
					uni.removeStorageSync("user");
					this.userInfo = {}
					this.$showToast("退出登录成功~");
				 });
			},
			
			mineMenu(path, index) {
				if(index === 3){
					this.$makePhoneCall()
				}else{
					this.$link(path)
				}
			},
			
			bindgetuserinfo(res) {
				let userInfo = res.detail.userInfo
				let loginData = {
					  code: common.getStorage('wxLoginCode'),
					  encryptedData: res.detail.encryptedData,
					  iv: res.detail.iv,
					  tenancyKey: common.tenancyKey
				}
				api.loginWithWechatCodeAsync(loginData, res => {
					common.setStorage('user', res)
					common.setStorage('token', res.token)
					this.userInfo = res
					this.$showToast('登录成功~')
				})
			}
		},
		
		onShareAppMessage(res) {
			return {
			 title: '上帝对诺亚说：你要用歌斐木造一只方舟，凡有血有肉的动物每样两个，你要带进方舟，好在你那里保全生命!',
			 path: '/pages/index/index'
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn-share2{
		    background: transparent;
		    display: inline-block;
		    width: 70px;
		    line-height: initial;
		    text-align: left;
			width: 100%;
	}
	.u-icon__icon, .u-icon--right{
		color: #999999 !important;
	}
	.ad-bg{
		width: 100%;
		height: 150upx;
		display: block;
		margin: 20upx 0;
		border-radius: 10upx;
	}
	.header-info{
		@include flex-base;
		padding: 20upx 0;
	}
	.user-avatar{
		width: 110upx;
		height: 110upx;
		border-radius: 100%;
		display: block;
		min-width: 110upx;
	}
	.user-info{
		flex-grow: 2;
		display: flex;
		flex-direction: column;
		padding-left: 20upx;
		box-sizing: border-box;
	}
	.user-login{
		font-size: 30upx;
		font-weight: bold;
		color: $theme-color;
	}
	.login-desc{
		font-size: $font-size-24;
		color: #999;
		margin-top: 10upx;
	}
	.user-name{
		font-size: 30upx;
		font-weight: bold;
		line-height: 30upx;
	}
	.role{
		background-color: $theme-color;
		font-size: $font-size-22;
		padding: 0 15upx;
		border-radius: 15upx 15upx 15upx 0;
		color: #fff;
		margin-left: 10upx;
	}
	.bind-phone{
		font-size: $font-size-24;
		color: #ff5b5b;
		margin-top: 10upx;
	}
	.money{
		@include  flex-base;
		justify-content: space-between;
		width: 100%;
	}
	.money-item{
		background-color: #fff;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 10upx;
		@include flex-base;
		width: 48%;
	}
	.item-title{
		font-size: $font-size-28;
		color: #999999;
		flex-shrink: 0;
	}
	.item-money{
		font-weight: bold;
		font-size: 32upx;
		height: 32upx;
		line-height: 32upx;
		flex-grow: 2;
		padding-left: 30upx;
	}
	.member{
		background-image: url(https://pet.dqword.com:8021/weappImg/bg_07.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100%;
		height: 120upx;
		border-radius: 10upx;
		@include flex-base;
		padding: 30upx;
		box-sizing: border-box;
		margin: 20upx 0;
	}
	.member-info{
		flex-grow: 2;
		.status{
			font-size: 28upx;
			color: #f5dab2;
			font-weight: bold;
		}
		.desc{
			color: #666;
			font-size: 22upx;
			margin-top: 10upx;
		}
		
	}
	.op-start{
		height: 50upx;
		@include flex-base;
		justify-content: center;
		border-radius: 50upx;
		background-color: $orange;
		font-weight: bold;
		font-size: $font-size-24;
		padding: 0 30upx;
	}
	
	.cell-box{
		border-radius: 10upx;
		overflow: hidden;
		margin-bottom: 20upx;
	}
	.mine-nav{
		background-color: #fff;
		border-radius: 10upx;
		padding: 20upx 30upx;
		@include flex-base;
		justify-content: space-between;
	}
	.mine-nav__item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.mine-nav__img{
		width: 44upx;
		height: 44upx;
		display: block;
	}
	.mine-item__title{
		font-size: 24upx;
		margin-top: 10upx;
	}
	.logout{
		background-color: #fff;
		border-radius: 10upx;
		height: 100upx;
		@include flex-base;
		justify-content: center;
		font-size: 32upx;
		margin-top: 20upx;
	}
</style>
